<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    class="custom-card"
    preset="card"
    :style="{ width: '800px' }"
    :title="title"
    :bordered="false"
    :segmented="{
      content: true,
      footer: true
    }"
  >
    <n-form label-placement="left" :label-width="120" :rules="rules">
      <n-form-item label="最后编辑人：">
        {{ detail.operatorId }}
      </n-form-item>
      <n-form-item label="创建时间：">
        {{ detail.createdAt }}
      </n-form-item>
      <n-form-item label="员工姓名：">
        {{ detail.operatorName }}
      </n-form-item>
      <n-form-item label="手机号：">
        {{ detail.operatorMobile }}
      </n-form-item>
      <n-form-item label="所属部门：">
        {{ detail.departmentName }}
      </n-form-item>
    </n-form>
    <n-h3>权限管理</n-h3>
    <n-form ref="formRef" :model="form" label-placement="left" :label-width="120" :rules="rules">
      <n-form-item label="员工岗位" path="roleIdList">
        <n-select
          v-model:value="form.roleIdList"
          placeholder="请选择员工岗位"
          :options="roleIdList"
          multiple
          value-field="id"
          label-field="roleName"
          clearable
        />
      </n-form-item>
      <n-form-item label="员工岗位" path="operatorStatus">
        <n-radio-group v-model:value="form.operatorStatus">
          <n-radio :value="1">启用</n-radio>
          <n-radio :value="0">冻结</n-radio>
        </n-radio-group>
      </n-form-item>
    </n-form>

    <template #footer>
      <n-space justify="end">
        <n-button @click="handleClose">取消</n-button>
        <n-button type="primary" :loading="loading" @click="handleSave">确定</n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script setup lang="ts">
  import {
    NModal,
    NForm,
    NFormItem,
    NSelect,
    NRadioGroup,
    NRadio,
    NH3,
    NSpace,
    NButton,
    FormValidationError
  } from 'naive-ui'
  import { useStore } from '@/store'
  import { onMounted, reactive, ref } from 'vue'
  const store = useStore()
  const emits = defineEmits(['success'])
  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    }
  })

  const getProps = reactive(props)
  const loading = ref(false)
  const loadingDetail = ref(false)
  const formRef = ref(null)
  const form = ref({
    operatorId: null,
    roleIdList: [],
    operatorStatus: null
  })
  const detail = ref({
    operatorId: null,
    createdAt: null,
    operatorName: null,
    operatorMobile: null,
    departmentName: null
  })
  const roleIdList = ref([])

  const rules = reactive({
    roleIdList: { type: 'array', required: true, message: '请选择', trigger: 'change' }
  })
  const title = '基本信息'

  onMounted(() => {
    getRoleIdList()
    if (props.modalData.row?.id) {
      getDetail()
    }
  })

  async function getRoleIdList() {
    loadingDetail.value = true
    const { data } = await store.dispatch('system/roleList')
    roleIdList.value = data
  }

  async function getDetail() {
    loadingDetail.value = true
    const { data } = await store
      .dispatch('system/operatorDetail', {
        operatorId: props.modalData.row.id
      })
      .finally(() => {
        loadingDetail.value = false
      })
    detail.value = data
    form.value.operatorStatus = data?.operatorStatus
    form.value.roleIdList = data?.roleIdList || []
  }

  function handleClose() {
    getProps.modalData.show = false
  }


  function handleSave() {
    formRef.value?.validate(async (errors: Array<FormValidationError>) => {
      if (!errors) {
        await submitData()
      } else {
        console.log(errors)
      }
    })
  }

  async function submitData() {
    loading.value = true
    const { data } = await store
      .dispatch('system/operatorSave', {
        ...form.value,
        operatorId: props.modalData.row.id
      })
      .finally(() => {
        loading.value = false
      })
    emits('success', data)
    getProps.modalData.show = false
  }
</script>

<style scoped lang="scss"></style>
